<template>
  <!-- style="width: 800px" -->
  <el-container>
    <el-main>
      <!-- drag -->
      <el-upload
        ref="upload"
        :action="UPDATE_USER_INFO_URL"
        
        name="headPortrait"
        :data="form"
        :auto-upload="false"
        :show-file-list="false"
        :with-credentials="true"
        :on-change="uploadChange"
        :on-success="successUp"
        :before-upload="beforeAvatarUpload"
        class="avatar-uploader"
      >
        <img v-if="headPortrait" :src="headPortrait" class="avatar" fit="cover" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <!-- label-width="80px" -->
      <el-form ref="form" :model="form" label-width="80px">
        <!-- <el-form-item label="头像">
          <el-avatar
            :size="100"
            @click.native="upLod"
            :src="hedImg"
          ></el-avatar>
          <el-input
            class="fileUp"
            id="file"
            ref="selectFiles"
            type="file"
            v-show="false"
            v-model="form.file"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="昵称">
          <el-input v-model="form.nickName"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-col :span="12">
            <el-input v-model="form.email" :disabled="emailDisabled" />
          </el-col>
          <el-col :span="4" :offset="8"
            ><el-button style="width: 100%" @click.prevent="ActionEditEmail"
              >修改邮箱</el-button
            ></el-col
          >
        </el-form-item>

        <el-form-item v-if="editEmail" label="验证码">
          <el-col :span="12">
            <el-input
              v-model="form.code"
              placeholder="修改邮箱向后发送验证码"
            />
          </el-col>
          <el-col :span="4" :offset="8"
            ><el-button style="width: 100%" @click.prevent="sendCode">
              <span>{{ countDown }}</span>
            </el-button></el-col
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.prevent="onSubmit">确认</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { updateUserInfo, sendReplaceEmail } from "@/api";
import { UPDATE_USER_INFO_URL } from "@/constant/common";
export default {
  data() {
    return {
      UPDATE_USER_INFO_URL,
      userInfo: JSON.parse(window.sessionStorage.getItem("userInfo")),
      emailDisabled: true,
      editEmail: false,
      //倒计时
      countDown: "发送验证码",
      close: 0,
      form: {
        nickName: JSON.parse(window.sessionStorage.getItem("userInfo")).nickName,
        email: "",
        code: "",
      },
      headPortrait: "",
    };
  },
  computed: {},
  methods: {
    successUp(response, file, fileList) {
      console.log(response);
      if (response.code == 0) {
        console.log(response,"------successUp--------")
        window.sessionStorage.setItem('userInfo',JSON.stringify(response.data))
        //刷新头
        this.$store.commit('routeJump/updateRefreshHead');
        this.$message({
          message: "修改成功",
          type: "success",
        });
      } else {
        this.$message({
          message: "修改失败",
          type: "error",
        });
      }
    },
    // upLod(){
    //   document.getElementById("file").click();

    //   // console.log(this.$refs.selectFiles.$el)
    // },
    //发送验证码
    sendCode() {
      if (typeof this.countDown == "string") {
        if (this.form.email) {
          sendReplaceEmail(this.form.email)
            .then(({ data }) => {
              if (data.code == 0) {
                this.$message({
                  message: "验证码发送成功",
                  type: "success",
                });
                this.countDown = 60;
                this.close = window.setInterval(this.subtract, 1000);
              } else {
                this.$message({
                  message: "验证码发送失败",
                  type: "error",
                });
              }
            })
            .catch((err) => {});
        } else {
          this.$message({
            message: "邮箱不能为空",
            type: "error",
          });
        }
      }
    },
    subtract() {
      if (this.countDown > 0) {
        console.log(this.countDown);
        this.countDown -= 1;
      } else {
        clearInterval(this.close);
        this.countDown = "发送验证码";
      }
    },
    //显示输入框
    ActionEditEmail() {
      this.editEmail = true;
      this.emailDisabled = false;
    },
    //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    uploadChange(file, fileList) {
      this.file = file;
      this.headPortrait = URL.createObjectURL(file.raw);
    },
    //上传之前
    beforeAvatarUpload(file) {
      console.log("上传之前", file);
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!");
      // }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return /*isJPG &&*/ isLt2M;
    },
    //提交
    onSubmit() {
      if (this.$refs.upload.uploadFiles.length) {
        this.$refs.upload.submit();
      } else {
        console.log(this.form);
        console.log("提交");
        console.log(this.file);
        updateUserInfo(this.form)
          .then(({ data }) => {
            console.log(data);
            this.successUp(data, null, null);
          })
          .catch((err) => {});
      }
    },
    
  },
};
</script>

<style scoped>
.avatar-uploader {
  /* 容器指定为Flex布局 */
  display: flex;
  /* 主轴为水平方向，起点在左端。 */
  flex-direction: row;
  /* 如果一条轴线排不下，不换行。 */
  flex-wrap: nowrap;
  justify-content: center;
  margin-bottom: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  /* width: 100%;
  height: 100%; */
  /* display: block;
  margin: auto; */
}
.el-upload-dragger {
  background-color: #8c939d;
}
/* .fileUp{
  width: 100px;
  height: 100px;
} */
</style>